<template>
  <div class="onepostbody">
    <el-scrollbar>
      <div class="query_post">
        <div class="post_peo" v-if="oneposti.userId">
          <el-avatar :size="100" :src="oneposti.img" style="margin-top: 10px;border: 1px solid #89b7ff"/>
          <span>{{oneposti.userId}}</span>
          <span class="typebacg"></span>
          <div class="post_type">{{oneposti.type}}</div>
        </div>
        <div class="post_peo" v-else >
          <el-avatar :size="100" :src="Loginer.img" style="margin-top: 10px;border: 1px solid #89b7ff"/>
          <span>{{LoginI}}</span>
          <span class="typebacg"></span>
          <div class="post_type">{{LoginType}}</div>
        </div>
        <div class="post_contain">
          <div class="posttitle">
            <p style="float: left">{{oneposti.title}}</p>
            <span style="float: right"><i class="iconfont icon-liulan"></i> {{oneposti.click}}</span>
          </div>
          <div class="postneirong">{{oneposti.content}}</div>
          <div class="postfooter">
            <p style="float: left">发布于 {{oneposti.date}}</p>
            <button class="postfooterbtn" @click="openclosePL(true)" v-if="LoginType!=='管理员'">
              <span class="icon">
                <el-icon><ChatDotRound /></el-icon>
              </span>
              <span class="text">我要评论</span>
            </button>
          </div>
        </div>
      </div>
      <div class="all_pl">
        <div>
          <p style="float: left">评论专区</p>
          <span style="float: right">{{num}}条评论</span>
        </div>
        <div v-for="(item,index) in allreply" :key="index">
          <div class="all_plimg">
            <el-avatar :size="40" shape="square" :src="item.img" style="border: 1px solid #80bfff"/>
          </div>
          <div class="all_plli">
            <div>
              <span style="border: 1px solid #4da9ff;color: #4da9ff;padding: 1px 3px;">{{item.type}}-{{item.userId}}</span>
              <span style="font-size: smaller;">{{item.date}}</span>
            </div>
            <div>{{item.content}}</div>
            <div v-if="item.status === '0'"><span @click="dianzan(item.replyId)"><i class="iconfont icon-31dianzan"></i> {{item.likeCount}}</span></div>
            <div v-else><span @click="qxdianzan(item.replyId)"><i class="iconfont icon-dianzan_kuai"></i> {{item.likeCount}}</span></div>
          </div>
        </div>

      </div>
    </el-scrollbar>
    <div class="menu-box" v-if="LoginI">
      <!-- 图标按钮 -->
      <div class="menu-button" @click="ClickDHL">
        <div class="line-box">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 菜单列表 -->
      <ul class="menu-list">
        <li @click="myPost"><i class="iconfont icon-wofadetiezi"></i><span>我的帖子</span></li>
        <li @click="toPost"><i class="iconfont icon-huifu"></i><span>发布帖子</span></li>
        <li @click="toHome"><i class="iconfont icon-shouye"></i><span>首页</span></li>
      </ul>
    </div>

    <div class="myPL" id="myPL" v-if="LoginI" >
      <div style="margin: 10px">
        <el-avatar :size="40" shape="square" :src="Loginer.img" style="border: 1px solid #4da9ff"/>
      </div>
      <div style="margin: 10px;flex: 1">
        <el-input
            v-model="myPLValue"
            autosize
            type="textarea"
            placeholder="发一条评论"
        />
      </div>
      <div style="margin: 10px;display: flex;align-items: center;justify-content: center">
        <el-button type="primary" @click="openclosePL(false)">发送</el-button>
      </div>

    </div>
  </div>
</template>

<script setup>
import {
  ChatDotRound,
} from '@element-plus/icons-vue'
import router from "@/router";
import {useStore} from "vuex";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {DZReply, getAllReplys, InsertReply, QXDZReply} from "@/api/reply";
const store = useStore()
const LoginI = store.getters.Id
const LoginType = store.getters.Type
const Loginer = JSON.parse(localStorage.getItem('loginer'))

const myPLValue = ref('')
const oneposti = ref(JSON.parse(localStorage.getItem('onepost')))
const allreply = ref({})
const num = ref(0)

// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
    hour: nowDate.getHours(),
    min: nowDate.getMinutes(),
    sec:nowDate.getSeconds(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day + ' ' + date.hour + ':' + date.min + ':' + date.sec
}
const datenow = ref(UpData())

//一个帖子的所有回复
const GetReplys = async () =>{
  await getAllReplys({pageNum:1,pageSize:999999,id:oneposti.value.postId,userId:LoginI}).then(res=>{
    if (res.code === 20041){
      allreply.value = res.data.list
      num.value = res.data.total
    }else {
      console.log(res.data)
    }
  })
}
GetReplys()


//open/close评论
const openclosePL = async (type) =>{
  let myPL = document.getElementById('myPL')
  if (type){
    myPL.classList.add('active')
  }else {
    if (myPLValue.value===''||myPLValue.value===null){
      ElMessage.warning('评论内容不能为空')
    }else {
      await InsertReply({
        postId:oneposti.value.postId,
        content:myPLValue.value,
        userId:LoginI,
        type:LoginType,
        date:datenow.value,
        like:0}).then(res=>{
        if (res.code === 20011){
          ElMessage.success('评论成功')
        }else {
          ElMessage.error('评论失败')
        }
        GetReplys()
      })
    }
    myPL.classList.remove('active')
    myPLValue.value = ''
  }

}

//点赞
const dianzan = async (id) =>{
  await DZReply({replyId:id,userId:LoginI}).then(res=>{
    if (res.code === 20031){
      console.log(res.data)
    }else {

    }
    GetReplys()
  })
}
//取消点赞
const qxdianzan = async (id) =>{
  await QXDZReply({replyId:id,userId:LoginI}).then(res=>{
    if (res.code === 20031){
      console.log(res.data)
    }else {

    }
    GetReplys()
  })
}

//我的帖子
const myPost = () =>{
  router.replace('/mypost')
}
//发布帖子
const toPost = () =>{
  router.replace('/post')
}
//帖子首页
const toHome = () =>{
  router.replace('/fourmm')
}
//下方导航
const ClickDHL = () =>{
  // 要操作的元素
  const menu_box=document.querySelector('.menu-box');
  menu_box.classList.toggle('active');

}
</script>

<style scoped>
.icon-liulan{
  font-size: 20px;
  color: #4da9ff;
}
.icon-31dianzan:hover{
  color: #4da9ff;
  font-size: 20px;
}
.icon-dianzan_kuai{
  color: #4da9ff;
  font-size: 20px;
}
.icon-dianzan_kuai:hover{
  color: black;
  font-size: 20px;
}
.onepostbody{
  flex: 1;
  overflow: hidden;
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: white;
}
.query_post{
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  min-height: 180px;
  margin: 10px 15%;
  border-radius: 12px;
  border: 1px solid #cbcbcb;
  box-shadow: #cccccc 0 0 6px;
}
.post_peo{
  width: 180px;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cbcbcb;
}
.typebacg{
  position: absolute;
  width: 80px;
  height: 80px;
  top: -50px;
  right: -50px;
  transform: rotate(45deg);
  background-color: #4da9ff;
}
.post_type{
  position: absolute;
  right: 0;
  font-weight: 600;
  color: #ffffff;
  margin: 2px;
}
.post_peo>span:not(:first-child){
  margin: 10px;
  border: 1px solid #4da9ff;
  padding: 2px 4px;
  color: #4da9ff;
  font-weight: 600;
}
.post_contain{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  /*border: 1px solid red;*/
}
.posttitle{
  font-weight: 600;
  font-size: 20px;
  line-height: 30px
}
.postneirong{
  flex: 1;
  padding: 2px;
  border: 1px solid #cbcbcb;
}
.postfooter{
  font-size: small;
  margin: 5px 0;
  color: #99a9bf;
}
.all_pl{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  margin: 10px 15%;
  border-radius: 12px;
  border: 1px solid #cbcbcb;
  box-shadow: #cccccc 0 0 6px;
}
.all_pl>div:first-child{
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  border-bottom: 1px solid #f3f3f3;
}
.all_pl>div:not(:first-child){
  padding: 2px;
  display: flex;
  border-bottom: 1px solid #f3f3f3;
}
.all_plimg{
  width: 40px;
  box-sizing: border-box;
  margin: 0 10px;
  /*border: 1px solid blue;*/
}
.all_plli{
  flex: 1;
}
.all_plli>div:first-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  /*border: 1px solid blue;*/
}
.all_plli>div:nth-child(2){
  justify-content: space-between;
  font-size: 20px;
  line-height: 40px;
  /*border: 1px solid blue;*/
}
.all_plli>div:last-child{
  justify-content: space-between;
  font-size: 20px;
  min-height: 20px;
  /*border: 1px solid blue;*/
}
.myPL{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate( -50%,100%);
  width: 70%;
  min-height: 60px;
  display: flex;
  z-index: 999;
  background-color: white;
  transition: all .2s ease;
  border: 1px solid #dadada;
  box-shadow: #cccccc 0 0 6px;
}
.myPL.active{
  transform: translate(-50%,0);
}
.menu-box{
  /* 固定定位 右下角 */
  position: fixed;
  bottom: 40px;
  right: 40px;
}
/* 菜单按钮 */
.menu-button{
  width: 50px;
  height: 50px;
  background-color: #5c67ff;
  border-radius: 50%;
  /* 投影 */
  box-shadow: 0 0 0 4px rgba(92,103,255,0.3);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /* 过渡 */
  transition: 0.2s ease-in;
}
.menu-button:hover{
  background-color: #4854ff;
  box-shadow: 0 0 0 8px rgba(92,103,255,0.3);
}
.menu-button .line-box{
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
/* 菜单按钮图标（三条杠） */
.menu-button .line{
  background-color: #fff;
  width: 100%;
  height: 2px;
  border-radius: 2px;
}
/* 前后两条短，中间的长 */
.menu-button .line:first-child{
  width: 50%;
  /* 设置变换的基点 */
  transform-origin: right;
  /* 过渡效果 */
  transition: transform 0.3s ease-in-out;
}
.menu-button .line:last-child{
  width: 50%;
  align-self: flex-end;
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
/* 菜单列表 */
.menu-list{
  width: 140px;
  height: 160px;
  background-color: #fff;
  border-radius: 8px;
  list-style: none;
  padding: 6px;
  box-shadow: 0 0 4px 4px rgba(92,103,255,0.15);
  position: absolute;
  right: 15px;
  bottom: 15px;
  /* 默认隐藏 */
  opacity: 0;
  transform: scale(0);
  /* 设置变换的基点 */
  transform-origin: bottom right;
  /* 过渡效果 */
  transition: 0.3s ease;
  /* 过渡延迟 */
  transition-delay: 0.1s;
}
/* 菜单项 */
.menu-list li{
  display: flex;
  align-items: center;
  padding: 10px;
  color: #1c3991;
  cursor: pointer;
  position: relative;
  /* 默认隐藏 */
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.2s ease-in;
}
.menu-list li:hover{
  color: #5c67ff;
}
/* 菜单项下边框 */
.menu-list li::before{
  content: "";
  width: calc(100% - 24px);
  height: 1px;
  background-color: rgba(92,103,255,0.1);
  position: absolute;
  bottom: 0;
  left: 12px;
}
/* 最后一项不用下边框 */
.menu-list li:last-child::before{
  display: none;
}
/* 菜单项图标 */
.menu-list .fa{
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 菜单项文本 */
.menu-list span{
  font-size: 14px;
  margin-left: 8px;
}
/* 活动态下的部分样式变化 */
/* 三条杠的变化 */
.active .line-box{
  transform: rotate(-45deg);
}
.active .line-box .line:first-child{
  transform: rotate(-90deg) translateX(1px);
}
.active .line-box .line:last-child{
  transform: rotate(-90deg) translateX(-1px);
}
/* 菜单列表的变化 */
.active .menu-list{
  opacity: 1;
  transform: scale(1);
}
.active .menu-list li{
  /* 执行动画：动画名 时长 线性 停留在最后一帧 */
  animation: fade-in-item 0.4s linear forwards;
}
/* 接下来为每一项设置动画延迟时间 */
.active .menu-list li:nth-child(1){
  animation-delay: 0.1s;
}
.active .menu-list li:nth-child(2){
  animation-delay: 0.2s;
}
.active .menu-list li:nth-child(3){
  animation-delay: 0.3s;
}
.active .menu-list li:nth-child(4){
  animation-delay: 0.4s;
}

/* 定义动画 */
@keyframes fade-in-item {
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}


/* From uiverse.io by @gagan-gv */
.postfooterbtn {
  width: 100px;
  height: 30px;
  border-radius: 5px;
  border: none;
  position: relative;
  transition: all 0.5s ease-in-out;
  font-size: 14px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  align-items: center;
  background: #3688ff;
  color: #f5f5f5;
  float: right;
}

.postfooterbtn:hover {
  box-shadow: 0 0 20px 0 #2e2e2e3a;
}

.postfooterbtn .icon {
  position: absolute;
  width: 16px;
  top: 50%;
  left: 0;
  padding: 0 2px;
  font-size: 16px;
  transform: translateY(-40%);
  transition: all 0.5s;
  /*border: 1px solid red;*/
}

.postfooterbtn .text {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate( -50% ,-50%);
}

.postfooterbtn:hover .icon {
  width: 100px;
}

.postfooterbtn:hover .text {
  transition: all 0.5s;
  opacity: 0;
}

.postfooterbtn:focus {
  outline: none;
}

.postfooterbtn:active .icon {
  transform: scale(0.95);
}
</style>